<template>
  <div class="side-dlg">
    <div class="title">
      站点概览
      <span class="close" @click="$emit('close')">
        <i class="el-icon-close"></i>
      </span>
    </div>
    <div v-loading="loading" class="main">
      <div class="overview-container">
        <card-list :title="allData.name || ''" class="dev-list">
          <div class="list">
            <div class="item">
              <icon-label-value
                :icon="require('@/assets/index/设备概览-高压柜.png')"
                label="高压柜数量"
                :value="allData.hCabies"
                :type="2"
                unit="台"
              ></icon-label-value>
              <icon-label-value
                :icon="require('@/assets/index/设备概览-变压器.png')"
                label="变压器数量"
                :value="allData.transformercount"
                :type="2"
                unit="台"
              ></icon-label-value>
              <icon-label-value
                :icon="require('@/assets/index/设备概览-低压柜.png')"
                label="低压柜数量"
                :value="allData.lCabies"
                :type="2"
                unit="台"
              ></icon-label-value>
            </div>
            <div class="item">
              <icon-label-value
                :icon="require('@/assets/index/设备概览-额定总容量.png')"
                label="额定总容量"
                :value="allData.loadcapacity"
                :type="2"
                unit="KVA"
              ></icon-label-value>
              <icon-label-value
                :icon="require('@/assets/index/设备概览-运行总容量.png')"
                label="运行总容量"
                :value="allData.runcapacity"
                :type="2"
                unit="KVA"
              ></icon-label-value>
            </div>
            <div class="item">
              <icon-label-value
                :icon="require('@/assets/index/设备概览-月最大需.png')"
                label="月最大需"
                :value="allData.maxNdHedMonth"
                :type="2"
                unit="KW"
              ></icon-label-value>
            </div>
          </div>
        </card-list>
        <card-list title="告警信息" class="card1">
          <el-radio-group slot="func" v-model="dateType" size="mini" @change="tabClick">
            <el-radio-button label="day">当日</el-radio-button>
            <el-radio-button label="month">当月</el-radio-button>
          </el-radio-group>
          <div class="list">
            <alarm-row
              label="越限告警"
              :icon="require('@/assets/index/告警信息-越限.png')"
              :alarm-num="dateType === 'day' ? allData.countLimit : monthData.countLimit"
              :todo-num="dateType === 'day' ? allData.doLimit : monthData.doLimit"
            ></alarm-row>
            <alarm-row
              label="通讯告警"
              :icon="require('@/assets/index/告警信息-通讯图标.png')"
              :alarm-num="dateType === 'day' ? allData.countComm :monthData.countComm"
              :todo-num="dateType === 'day' ? allData.doComm :monthData.doComm"
            ></alarm-row>
            <alarm-row
              label="异常告警"
              :icon="require('@/assets/index/告警信息-变位.png')"
              :alarm-num="dateType === 'day' ? allData.countAbnormal : monthData.countAbnormal"
              :todo-num="dateType === 'day' ? allData.doAbnormal : monthData.doAbnormal"
            ></alarm-row>
            <alarm-row
              label="事故告警"
              :icon="require('@/assets/index/告警信息-事故.png')"
              :alarm-num="dateType === 'day' ? allData.countFault : monthData.countFault"
              :todo-num="dateType === 'day' ? allData.doFault : monthData.doFault"
            ></alarm-row>
            <alarm-row
              label="不平衡告警"
              :icon="require('@/assets/index/告警信息-不平衡告警.png')"
              :alarm-num="dateType === 'day' ? allData.countimb : monthData.countimb"
              :todo-num="dateType === 'day' ? allData.doimb : monthData.doimb"
            ></alarm-row>
          </div>
        </card-list>
        <card-list title="电能消耗" class="worke-order">
          <div class="list">
            <energy-row
              :label="['今日用电量', '昨日同期用电量']"
              :value="[allData.dcountTodayKwh, allData.dcountYesKwh]"
            ></energy-row>
            <energy-row
              :label="['本月用电量', '上月同期用电量']"
              :value="[allData.mcountmonthKwh, allData.mcountYesKwh]"
            ></energy-row>
          </div>
        </card-list>
      </div>
    </div>
  </div>
</template>

<script>
import CardList from "./CardList";
import AlarmRow from "./AlarmRow";
import { getStationView, getStationAlarms } from "@/api/svg";
import IconLabelValue from "./IconLabelValue";
import EnergyRow from "./EnergyRow";
export default {
  components: {
    CardList,
    AlarmRow,
    IconLabelValue,
    EnergyRow
  },
  props: {
    stationId: {
      type: Number,
      required: true
    },
    clientId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      allData: {},
      loading: false,
      dateType: "day",
      isInit: true,
      monthData: {},
      dayData: null,
      monthLoading: false,
      monthError: false
    };
  },
  computed: {
    data1() {
      if (!this.allData) return null;
      const { inLineP, inLineQ } = this.allData;
      return [
        { label: "进线有功总加", value: inLineP },
        { label: "进线无功总加", value: inLineQ }
      ];
    },
    data2() {
      if (!this.allData) return null;
      const { transP, transQ } = this.allData;
      return [
        { label: "变压器有功总加", value: transP },
        { label: "变压器无功总加", value: transQ }
      ];
    }
  },
  watch: {
    stationId: {
      async handler(id) {
        this.loading = true;
        await getStationView(this.clientId, id).then(data => {
          this.allData = data;
        });
        this.loading = false;
        if (this.dateType === "month") {
          this.isInit = true;
          this.tabClick(this.dateType);
        }
      }
    }
  },
  async created() {
    this.loading = true;
    await getStationView(this.clientId, this.stationId).then(data => {
      this.allData = data;
    });
    this.loading = false;
    if (this.dateType === "month") {
      this.isInit = true;
      this.tabClick(this.dateType);
    }
  },
  methods: {
    async tabClick(v) {
      console.log(v);
      if (v === "month") {
        this.monthLoading = true;
        await getStationAlarms(this.clientId, this.stationId, 2)
          .then(data => {
            this.monthData = data;
            this.isInit = false;
          })
          .catch(e => this.$message.error(e));
        this.monthLoading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.side-dlg {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(209, 222, 246, 0.8);
  font-size: 14px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: all 0.5s;
  height: 100%;
  width: 400px;
  font-size: 14px;
  .title {
    background: rgba(48, 138, 231, 0.8);
    height: 36px;
    line-height: 36px;
    padding-left: 14px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .close {
      line-height: 36px;
      width: 36px;
      text-align: center;
      display: inline-block;
      color: #ffffff;
      cursor: pointer;
      font-size: 18px;
      &:hover {
        color: #eeeeee;
      }
    }
  }
  .dev-list {
    .list {
      padding: 10px;
      .icon-label-value {
        padding: 6px;
        background: transparent;
        /deep/ .el-image {
          width: 28px;
          height: 28px;
        }
      }
      .item {
        background: rgba(244, 246, 250, 1);
        border-radius: 4px;
        margin-top: 10px;
        &:first-child {
          margin-top: 0;
        }
      }
    }
  }
  .main {
    height: calc(100% - 36px);
    overflow-y: auto;
    .card-list {
      margin-top: 14px;
      &:first-child {
        margin-top: 0;
      }
    }
    /deep/ .row {
      height: 40px;
      align-items: center;
      margin: 0;
      border-top: 1px solid #e7e9ed;
      color: #1d2531;
      &:first-child {
        border-top: 0;
      }
    }
    .worke-order {
      .item {
        text-align: center;
        .value {
          font-size: 18px;
          line-height: 1.4;
        }
        .label {
          font-size: 14px;
          color: #7f8fa4;
        }
      }
    }
  }
  .overview-container {
    margin: 18px;
  }
}
</style>
